<template>
  <div class="center">
    <div class="head">
      <div
        style="display: flex; justify-content: space-around"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="yuan" :class="{ 'yuan': true, 'special-margin': index === 2 }">
          <img :src="item.img" class="one"></img>
        </div>
        <div class="text">
         <div style="display: flex;">
          <div :class="{'special-margin2': index === 2 }">{{ item.name }}</div>
           <div class="tip" v-if="item.name == '食堂数 （个）'">
      <div style="margin-bottom: 10px;" v-for="(item, index) in tipList" :key="index">
        <div> {{ item.num }}</div>
       <div> {{ item.name }}</div>
      </div>
    </div>
         </div>
          <div style="font-size: 36px; color: #00fffa">
            <count-to ref="countTo" :duration="3600" :start-val="0" :end-val="item.num"></count-to
            >
            <!-- {{ item.unit }} -->
          </div>
        </div>
      </div>
    </div>
    <div class="dishesList">
      <subTit class="dishesListHead"  title="浮动较大菜品清单"></subTit>
      <div class="content">
        <div><span class="tubiao"></span><span>原材料:</span> <span style="display: inline-block;margin-left: 10px;">大白菜(夏阳白)</span></div>
        <div><span class="tubiao"></span><span >上次报价</span> <span style="color: #00ffff;font-weight: bold;">￥1.24</span>/斤</div>
        <div><span class="tubiao"></span><span >本次报价</span> <span style="color: #00ffff;font-weight: bold;">￥1.65</span>/斤</div>
        <div>
          <span class="tubiao"></span>
          <span >上涨百分比: </span
          ><span class="proportion"> 33%<span class="onon"></span></span>
        </div>
      </div>
    </div>
    <div class="category">
      <!-- <subTit title="全市食堂各类目采购总价趋势"></subTit> -->
      <itemBox title="全市食堂各类目采购总价趋势">
      <div class="option">
        <div class="zhex" v-for="(item, index) in zxList" :key="index">
          <chart
            :option="item.option"
            style="width: 100%; height: 100%"
          ></chart>
        </div>
      </div>
    </itemBox>
      <!-- </scroll> -->
    </div>
  </div>
</template>
<script>
import drawMixin from "@/utils/drawMixin";
let mixin = new drawMixin();
import chart from "@/components/eChart";
import scroll from "@/views/food/components/tableScroll/index.vue";
import subTit from "../../components/subTit";
import countTo from "vue-count-to";
import itemBox from './itemBox.vue'
export default {
  name: "index",
  components: { chart, scroll, subTit, countTo ,itemBox},
  mixins: [mixin],
  data() {
    return {
      interval: null,
      list: [
        {
          img: require('@/assets/food/5.svg'),
          name: "学校数 （所）",
          num: 342,
          unit: "所",
        },
        {
          img: require('@/assets/food/shitang.png'),
          name: "食堂数 （个）",
          num: 432,
          unit: "个",
        },
        {
          img:require('@/assets/food/chushi.png'),
          name: "厨工数 /人",
          num: 1562,
          unit: "人",
        },
        {
          img: require('@/assets/food/gongyingshang.png'),
          name: "供应商数 （家）",
          num: 16,
          unit: "家",
        },
      ],
      tipList: [
        {
          name: "自营",
          num: "233",
        },
        {
          name: "外包",
          num: "199",
        },
      ],
      zxList: [
        {
          name: "全类目",
          color: "#33edfd",
          value:[1715,1632,1668,1724,1695],
          option: {},
        },
        {
          name: "鲜蔬类",
          color: "#00baff",
          value:[686,489.6,500.4,517.2,508.5],
          option: {},
        },
        {
          name: "牛奶类",
          color: "#ffb936",
          value:[205.8,195.84,200.16,206.88,203.4],
          option: {},
        },
        {
          name: "水果类",
          color: "#00baff",
          value:[257.25,244.8,250.2,258.6,254.25],
          option: {},
        },
        {
          name: "豆制品类",
          color: "#ffb936",
          value:[102.9,97.92,100.08,103.44,101.7],
          option: {},
        },
        {
          name: "鲜活类",
          color: "#33edfd",
          value:[205.8,195.84,200.16,206.88,203.4],
          option: {},
        },
        {
          name: "调料类",
          color: "#ffb936",
          value:[13.72,13.056,13.344,13.792,13.56],
          option: {},
        },
        {
          name: "干货类",
          color: "#33edfd",
          value:[102.9,13.056,13.344,13.792,13.56],
          option: {},
        },
        {
          name: "冷冻类",
          color: "#00baff",
          value:[140.63,297.024,303.576,313.768,308.49],
          option: {},
        },
        {
          name: "腌制类",
          color: "#33edfd",
          value:[13.72,13.056,13.344,13.792,13.56],
          option: {},
        },
        {
          name: "点心类",
          color: "#00baff",
          value:[205.8,195.84,200.16,206.88,203.4],
          option: {},
        },
        {
          name: "粮油类",
          color: "#ffb936",
          value:[102.9,97.92,100.08,103.44,101.7],
          option: {},
        },
      ],
    };
  },
  mounted () {
    this.handleStart()
    this.zxList.forEach((item) => {
      item.option = this.getOption(item);
    });
  },
  beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
  methods: {
    getOption(data) {
      return {
        grid: {
      top: 40,    // 设置图表距离容器顶部的距离
      bottom: 60, // 设置图表距离容器底部的距离
      left:32,   // 设置图表距离容器左侧的距离
      right: 25,  // 设置图表距离容器右侧的距离
    },
        xAxis: {
          type: "category",
          data: [
            "2023-10",
            "2023-11",
            "2024-01",
            "2024-02",
            "2024-03",
          ],
          axisLabel: {
            interval: 0,
            rotate: 45,
            textStyle: {
          color: "#8091a1" // 修改 y 轴字体颜色为白色
        }
          },
        },

        yAxis: {
          type: "value",
          name: '单位：元',
          nameTextStyle: {
    color: "#8091a1",
  },
          axisLabel: {
        textStyle: {
              color: "#8091a1", // 修改 y 轴字体颜色为白色

            }
          },
          splitLine: {
      lineStyle: {
              type: "dashed",
              color: "#3f5975", // 虚线的颜色
      },
    },
        },
        legend: {
          data: [data.name], // 图例名称
          textStyle: {
            color: "#fff",
          },
          top: 0,
          left: "center",
          icon: "rect", // 将图例样式设置为长方形
        },
        series: [
          {
            name: data.name,
            data: data.value,
            type: "line",
            smooth: 0.1, // 将曲线变成折线
            itemStyle: {
              color: data.color, // 折线颜色为红色
            },
            areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [{
              offset: 0, color: data.color // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色，透明度为 0
            }],
            global: false // 缺省为 false
          }
        },
          },
        ],
      };
    },
    handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          for (let i = 0; i < this.$refs.countTo.length; i++){
            this.$refs.countTo[i].start()
          }
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      },
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 0px;
  /* 对应横向滚动条的宽度 */
  height: 1px;
  // padding-left: -100px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: rgba(3, 31, 73, 0.5);
  border-radius: 32px;
}
.center {
  margin-top: 10px;
  .head {
    display: flex;
    justify-content: space-between;
    .yuan {
      position: relative;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background-image: url("~@/assets/food/yuan.svg");
      margin-right: 8px;

      .one {
        position: absolute;
        top: 18px;
        left: 20px;
        width: 32px;
        height: 32px;
        // background-image: url("~@/assets/food/5.svg");
        // background-size: 100% 100%;
      }
    }
    .special-margin {
  margin-left: 15px;
    }
.special-margin2 {
  margin-right: 15px;
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 20px;
      position: relative;
    }
  }
  .tip {
    // margin: 10px 0 20px 240px;
    position: absolute;
    top: -20px;
    right: -84px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    div {
      margin-right: 30px;
    }
  }

  .dishesList {
    position: relative;
    width: 100%;
    height: 84px;
   margin-top: 36px;
    background: rgba(0, 16, 43, 0.32);
    border: 1px solid;
    -o-border-image: linear-gradient(to bottom, rgba(8, 132, 255, 0.2), #0884ff)
      1;
    border-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(rgba(8, 132, 255, 0.2)),
        to(#0884ff)
      )
      1;
    border-image: linear-gradient(to bottom, rgba(8, 132, 255, 0.2), #0884ff) 1;
    .dishesListHead {
      position: absolute;
      top: -4px;
      left: -1px;
    }
    .title {
      font-size: 16px;

    }
    .content {
      display: flex;
      justify-content: space-around;
      margin-top: 44px;
      font-size: 16px;
      font-weight: 400;
      .proportion {
        display: inline;
        color: #00ffff;font-weight: bold;
        // background-color: #fcbfc5;
        // color: #e61f19;
        .onon {
          display: inline-block;
          width: 20px;
          height: 20px;
          background-image: url('~@/assets/food/3.png');
          background-size: cover;
        }
      }
    }
    .tubiao {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url('~@/assets/food/tubiao.png');
      background-size: contain;
    }
  }
  .category {
    margin-top: 24px;
    .tit {
      font-size: 28px;
    }
    .option {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
     overflow-y:scroll ;
      height: 656px;
      .zhex {
        width: 274px;
        height: 215px;
      }
    }
  }
}
</style>
